<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
<title>Add Users using ajax</title>
 <script src="/MVCJquery/js/jquery-1.9.1.js"> </script> 
 <%-- <script type="text/javascript" src="<c:url var="data" value='/js/jquery.js'/>"></script>
 <c:out value="${data}"/> --%>
 
 <script type="text/javascript">
     var jq = jQuery.noConflict(); 
 </script>
   
 
  
 <title>Spring MVC - jQuery Integration Tutorial</title>
 
 <script type="text/javascript">
 jq(document).ready(function(){
	 jq("#sum").click(function(){
		 jq("#inputNumber1").hide();
  });
});
</script>
</head>
<body>
 
<h3>Spring MVC - jQuery Integration Tutorial</h3>
<h4>AJAX version</h4>
 
Demo 1
<div style="border: 1px solid #ccc; width: 300px;">
 Add Two Numbers:
  <br/>
 <input id="inputNumber1" name="inputNumber1" type="text" size="5"> +
 <input id="inputNumber2" name="inputNumber2" type="text" size="5">
 <br/>
 <input type="submit" value="Add" onclick="add()" />
 <br/>
 Sum: <span id="sum">(Result will be shown here)</span>
</div>
 
 
<script type="text/javascript">
document.write(Date());
 
function add() {
	
//jq("#sum").fadeIn();
  jq(function() {
  // Call a URL and pass two arguments
  // Also pass a call back function
  // See http://api.jquery.com/jQuery.post/
  // See http://api.jquery.com/jQuery.ajax/
  // You might find a warning in Firefox: Warning: Unexpected token in attribute selector: '!'
  // See http://bugs.jquery.com/ticket/7535
  /*   
   jq.post("/MVCJquery/add.htm",
    {  inputNumber1:  jq("#inputNumber1").val(),
       inputNumber2:  jq("#inputNumber2").val() },
       function(data){
       	//alert("Data Loaded: " + data);
       //data contains the result
      // Assign result to the sum id
      jq("#sum").replaceWith('<span id="sum">'+ data + '</span>');
    });   */
//  
 
  jq.ajax({  
	    type: "POST",  
	 //   dataType: "json",
	 //   contentType: "application/json",
	  //  processData: false,
	    url: "/MVCJquery/add.htm",  
	    data: { inputNumber1:  jq("#inputNumber1").val(),
	            inputNumber2:  jq("#inputNumber2").val() },  
	    success: function(data){  
	    	alert("Data Loaded: " + data);
	      // we have the response  
	    	jq("#sum").replaceWith('<span id="sum">'+ data + '</span>');
	    },  
	    error: function(e){  
	      alert('Error: ' + e);  
	    }  
	  });      
  ////
  
  
    
 }); 
} 
 
</script>

<script type="text/javascript">
     var yourMessage = "";
    jq(document).ready(function() {
        alert('in doc');
        jq.ajax({
            url: "/MVCJquery/list.htm",
            type: "GET",
            data: "list="+'12',
            dataType: "json",
            error: function() {alert('eerrrr');},
            success: function(data) {
                alert('success');
                alert(data);
                for(var count=0; count<data.length; count++){
                	 yourMessage =yourMessage+ data[count]+",<br/>";
                	 jq("#list").html(yourMessage);
                	}   
                
            },
            complete: function() {}
        });
        });</script>
        
        <div id="list"> list response test</div>
</body>
</html> 